<template>
  <div class="ground_dateils" v-loading="loading">
    <!-- 头部 -->
    <div class="header_box">
      <span @click="goHome()">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/goHomeOne.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title">接收人</span>
      <span>
        <img
          class="imgTwo"
          src="~@/assets/duZhongTai/more.png"
          alt=""
          srcset=""
        />
      </span>
    </div>
    <!-- 内容 -->
    <div class="content_box">
      <!-- 已读未读 -->
      <div class="tabs_box">
        <van-tabs
          v-model="active"
          @click="onChange"
          color="rgb(247,247,247)"
          background="rgb(247,247,247)"
        >
          <van-tab
            v-for="(item, index) in tabsList"
            :title="item.title"
            :key="index"
          >
            <!-- <div class="du_content badge_box">
              <van-badge content="89" class="van-badge_b" max="99">
                <div class="child" />
              </van-badge>
              <div class="du_box" v-for="(item, index) in aList" :key="index">
                <img
                  src="../../../../assets/duZhongTai/readUser.png"
                  alt=""
                  srcset=""
                />
                <span style="margin-left: 10px">{{ item.name }}</span>
              </div>
            </div> -->
            <div slot="title" class="badge_box">
              <span :class="active === index ? 'active' : ''">{{
                item.title
              }}</span>
              <!-- <span :class="active === index ? 'active' : ''">{{
                item.name
              }}</span> -->
              <van-badge :content="total" class="van-badge_b" max="99" v-show="active == index && total != 0"> </van-badge>
            </div>
            <div class="du_content" ref="scroll_du" @scroll="scrollBottom">
              <div v-for="(item, index) of aList" :key="index" class="du_box">
                <img
                  src="../../../../assets/duZhongTai/readUser.png"
                  alt=""
                  srcset=""
                />
                <span style="margin-left: 10px">{{ item.userName }}</span>
              </div>
              <div v-if="noMore" class="no_more">没有更多了...</div>
            </div>
            <!-- <div v-else class="du_content">
              <van-empty description="暂无数据..." />
            </div> -->
          </van-tab>
          <!-- <van-tab title="已读"
            ><div class="du_content">
              <div class="du_box" v-for="(item, index) in aList" :key="index">
                内容二
              </div>
            </div></van-tab
          > -->
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { ImagePreview } from "vant";
import { Tab, Tabs } from "vant";

// 全局注册
Vue.use(ImagePreview);
export default {
  data() {
    return {
      aList: [
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
        // { name: "李紫怡", status: "未读" },
        // { name: "才欧", status: "未读" },
        // { name: "夏沫", status: "未读" },
      ],
      tabsList: [
        {
          title: "未读",
          id: 0,
        },
        {
          title: "已读",
          id: 1,
        },
      ],
      active: '0',
      loading: false,
      detailsId: null,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      noMore: false,
      isTogether:null,
      logId:null
    };
  },
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  watch: {},
  activated() {
    console.log("this.$route.params.item==", this.$route.params.item);
    console.log("this.$route.params.item==", this.$route.params.item.logId);
    if (this.$route.params.item) {
      this.logId = this.$route.params.item.logId;
      this.isTogether = this.$route.params.item.isTogether;
      console.log("this.logId=",this.logId);
      console.log("this.isTogether=",this.isTogether);
      this.aList = [];
      this.total = 0;
      this.pageNum = 1;
      this.active = '0'
      this.getDuData(this.logId,this.isTogether)
    }
  },
  created() {},

  mounted() {},
  methods: {
    //返回
    goHome() {
      this.$router.go(-1); // 返回上一页
    },
    // 点击标签页
    onChange() {
      console.log("111", this.active);
      this.noMore = false;
      this.total = 0;
      this.aList = [];
      this.pageNum = 1;
      this.getDuData(this.logId,this.isTogether);
    },
    //获取列表数据
    getDuData(logId,isTogether) {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/recipient"),
        method: "get",
        params: this.$http.adornParams({
          logId,
          isTogether,
          pageNum:this.pageNum,
          pageSize:10,
          redFlag:this.active
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (data.data.records.length) {
            console.log("this.total==",this.total);
            this.aList = [...this.aList, ...data.data.records]; // 合并数据
            console.log("合并后的数据==", this.aList);
            this.total = data.data.total;
            console.log("this.total=111111111111111111=",this.total);
          } else {
            this.noMore = true; // 用一个变量来记录没有更多数据了
          }
        } else {
          Toast.fail(data.msg);
          this.total = 0;
          this.aList = []
        }
      });
    },
    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement;
      // console.log("scrollTop=", scrollTop)
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("触底了，加载数据");
        if (this.noMore) return;
        this.pageNum++;
        this.getDuData(this.logId,this.isTogether);
      } else {
        // console.log("到底了");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
  //   color: #fff;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.tabs_box {
  // background-color: #fff;
}
</style>
<style scoped>
.ground_dateils /deep/ .van-tabs__wrap {
  /* height: 60px; */
  height: 45px;
}
.ground_dateils /deep/ .van-tab--active {
  background-color: #fff;
  border-radius: 20px;
  width: 40%;
  height: 80%;
  margin-top: 5px;
  color: rgb(73, 145, 242) !important;
}

.du_content {
  /* height: calc(100vh - 100px); */
  height: calc(100vh - 5.375rem);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: auto;
  background: rgb(247, 247, 247);
  padding-bottom: 4.25rem;
  padding-top: 1px;
}
.du_box {
  /* display: -webkit-box;
  display: -ms-flexbox; */
  display: flex;
  width: 96%;
  margin-left: 2%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  height: 3.25rem;
  padding: 0 10px;
  position: relative;
}
.badge_box {
  /* position: relative; */
}
.van-badge_b {
  position: absolute;
  top: 6%;
  right: 3%;
}
.no_more {
  text-align: center;
  /* margin-top: 10px; */
  margin-top: 1.5625rem;
}
</style>
